import './WeChatBaseConfig.scss'
import dayjs from 'dayjs'
import { useInterval } from 'ahooks'
import { useState } from 'react'
import { Divider } from 'antd'
import { EllipsisOutlined, SyncOutlined } from '@ant-design/icons';


const SimulatorWindow = () => {
    const [TIME, setTIME] = useState(dayjs().format('HH:mm'))
    useInterval(() => setTIME(dayjs().format('HH:mm')), 1000)

    const topConfig = {
        navigationStyle: 'default', // default  custom,
        navigationBarBackgroundColor: '#000000',
        navigationBarTextStyle: 'white', // white  black
        navigationBarTitleText: '测试标题'
    }

    return (
        <div className='SimulatorWindow'>
            <div className="fiexdData" style={{ color: topConfig.navigationBarTextStyle || 'black' }}>
                <div>{TIME}</div>
                <div>100%</div>
            </div>
            <div className="fixedTop" />
            <div className="fixedBtm" />

            <div className="capsule">
                <EllipsisOutlined />
                <Divider type="vertical" />
                <SyncOutlined />
            </div>

            {/* 显示盒子 */}
            <div className='RenderBox'>
                {topConfig.navigationStyle === 'default' &&
                    <div className='Top' style={{ background: topConfig.navigationBarBackgroundColor, color: topConfig.navigationBarTextStyle }}>
                        {topConfig.navigationBarTitleText}
                    </div>
                }
                <div className='Content'>
                    content
                </div>
            </div>
        </div>
    )
}




const WeChatBaseConfig = () => {

    return (
        <div className="WeChatBaseConfig">
            <SimulatorWindow />
            <div className='setting'>
                <div>加载界面 ... 判断登录  判断登录人 判断登录项目 判断权限</div>
                <div>登录页面</div>

                {/* 首次登录  判断二次登录  判断项目选择   */}
            </div>
        </div>
    );
};

export default WeChatBaseConfig;